<template>
  <router-view />
  <van-tabbar v-model="active" inactive-color="#ccc">
    <van-tabbar-item to="/">
      <span>{{ $t("home") }}</span>
      <template #icon="props">
        <img :src="props.active ? imageUrl : lion_active" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="search" to="/starPool"
      ><span>{{ $t("starPool") }}</span>
      <template #icon="props">
        <img :src="!props.active ? startPool : startPoolActive"
      /></template>
    </van-tabbar-item>
    <van-tabbar-item to="/trade"
      ><span>{{ $t("trade") }}</span>
      <template #icon="props">
        <img :src="!props.active ? tradePng : goat_active"
      /></template>
    </van-tabbar-item>
    <van-tabbar-item to="/assets"
      ><span>{{ $t("assets") }}</span>
      <template #icon="props">
        <img :src="!props.active ? assets : assets_active"
      /></template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    const imageUrl = new URL("./assets/home-icon.png", import.meta.url).href;
    const startPool = new URL("./assets/star-pool.png", import.meta.url).href;
    const tradePng = new URL("./assets/trade.png", import.meta.url).href;
    const assets = new URL("./assets/plat-form.png", import.meta.url).href;

    
    const assets_active = new URL(
      "./assets/assets-logo-inactive.png",
      import.meta.url
    ).href;
    const goat_active = new URL("./assets/goat_active.png", import.meta.url)
      .href;
    const startPoolActive = new URL("./assets/balance.png", import.meta.url)
      .href;
    const lion_active = new URL("./assets/lion_inactive.png", import.meta.url)
      .href;
    const active = ref(0);
    watch(
      () => router?.currentRoute?.value?.path,
      (toPath) => {
        if (toPath) {
          if (toPath === "/starPool") {
            active.value = 1;
          }
          if (toPath === "/home" || toPath === "/") {
            active.value = 0;
          }
          if (toPath === "/assets") {
            active.value = 3;
          }
          if (toPath === "/trade") {
            active.value = 2;
          }
        }
      },
      { immediate: true, deep: true }
    );

    setTimeout(() => {
      if (route.fullPath === "/starPool") {
        active.value = 1;
      }
      if (route.fullPath === "/home" || route.fullPath === "/") {
        active.value = 0;
      }
      if (route.fullPath === "/assets") {
        active.value = 3;
      }
      if (route.fullPath === "/trade") {
        active.value = 2;
      }
    }, 300);

    return {
      active,
      imageUrl,
      startPool,
      startPoolActive,
      lion_active,
      goat_active,
      tradePng,
      assets,
      assets_active,
    };
  },
};
</script>

<style lang="less">
:root:root {
  --van-tabbar-background: #202336;
  --van-tabbar-item-active-color: #fff;
  --van-tabbar-item-active-background: #202336;
  --van-field-label-color: #fff;
  --van-field-input-text-color: #fff;
  --van-dialog-background: #333641;
  --van-button-default-background: #2b2f3c;
  --van-pagination-item-default-color: #9699a2;
  --van-pagination-background: #202336;
  --van-pagination-desc-color: "red";
  --van-popup-background: #202336;
  --van-dialog-has-title-message-text-color: #fff;
  --van-count-down-text-color:#fff
}

@font-face {
  font-family: "dinBold";
  src: local("dinBold", url("assets/fonts/din-bold-2.ttf"));
}

@font-face {
  font-family: "dinMedium";
  src: local("dinMedium", url("assets/fonts/DIN-Medium-2.ttf"));
}
</style>
